<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <div id="all">
        <h1>礼盒商城</h1>
        <div class="login-container">
      <h2>欢迎登录</h2>
  
      <form @submit.prevent="loginin" class="login-form">
        <label for="username">手机号：</label>
        <input type="number" id="username" v-model="account" />
        <label for="password">密码：</label>
        <input type="password" id="password" v-model="password" />
        <button type="submit" style="background: -webkit-linear-gradient(left,red,#300cb2,#0cb299);">登录</button>
      </form>
    </div>
    </div>
  </template>
  
  <script setup>
import { ref } from 'vue'  // 导入ref函数，从'vue'库中
import { login } from '../../api/index'  // 导入名为login的函数，从'../../api/index'文件中
import { useRouter } from 'vue-router'  // 导入useRouter函数，从'vue-router'库中
import { useUserInfoStore } from '../../stores/user';  // 导入名为useUserInfoStore的函数，从'../../stores/user'文件中

const router = useRouter()  // 使用useRouter函数创建router对象
const userInfoStore = useUserInfoStore()  // 使用useUserInfoStore函数创建userInfoStore对象
const account = ref()  // 创建一个ref对象account
const password = ref()  // 创建一个ref对象password

// 处理登录逻辑
async function loginin() {
  const res = await login({ account: account.value, password: password.value })  // 调用login函数，并传入account和password的值作为参数，将返回结果赋值给res变量
  userInfoStore.setCurStatus(res)  // 调用userInfoStore对象的setCurStatus方法，传入res作为参数
  router.push({ path: '/tabBarView' })  // 跳转到'/tabBarView'路径
}


  </script>
  
  <style lang="less" scoped >
  #all{
    height: 100vh;
    background: -webkit-linear-gradient(
    60deg,
    #dfff86 10%,
    #E88F21 10%,
    #2303f1 10%,
    #f65c02 10%,
    #f83600 0%,
    #ee06bf 0%,
    #dfff86 0%,
    #f80978,
    #75ffc8;
  );    padding-top:20vh;
  }
  .login-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
    opacity: 0.7; /* 调整透明度以达到期望的效果 */
    background-color: #96b984;
    backdrop-filter: blur(10px); /* 调整模糊程度以达到期望的效果 */
  }
  h1{
  padding-bottom: 5vh;
  padding-left: 10vw;
  }
  h2 {
    font-size: 24px;
    margin-bottom: 20px;
  }
  
  .login-form {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  label {
    margin-bottom: 10px;
  }
  
  input {
    width: 200px;
    padding: 8px;
    margin-bottom: 10px;
    border-radius: 4px;
    border: 1px solid #ccc;
  }
  
  button {
    width: 100px;
    padding: 8px;
    border-radius: 4px;
    border: none;
    background-color: #007bff;
    color: #fff;
    cursor: pointer;
  }
  
  button:hover {
    background-color: #0056b3;
  }
  </style>
  